<!-- 故障工单详情页-->
<template>
	<div style="height: 100vh;">
		<scroll-view class="heart ftiPage" scroll-y="true">
			<text class="guzhangTitle">{{inter.equipment}}:</text>
			<view class="" v-for="(item,index) in list" :key="index">
				<picker mode="selector" :range="item"  range-key="Name" @change="changeList($event,index,item)" >
					<view class="downSelect">
						<p>{{nameList[index].Name}}</p>
						<image src="../../../static/DMS_gzlr_xzxl_icon.png" style="width: 28upx; height: 20upx;" mode="scaleToFill"></image>
					</view>
				</picker>
			</view>
				
			<text class="guzhangTitle">{{inter.faultDes}}:</text>
			<view class="searchInput">
				<input type="text" style="background-color: #FFFFFF;border-radius: 10upx;height: 64upx;box-shadow: 2upx #2F2F2F;margin-top: 15upx;font-size: 28upx;padding-left: 18upx;" :placeholder="inter.faultDes" placeholder-style="font-size:28upx;" value=""  v-model="searchingCode" />
			</view>
			<text class="guzhangTitle">{{inter.solution}}:</text>
			<view class="searchInput">
				<input type="text" style="background-color: #FFFFFF;border-radius: 10upx;height: 64upx;box-shadow: 2upx #2F2F2F;margin-top: 15upx;font-size: 28upx;padding-left: 18upx;" :placeholder="inter.solution" placeholder-style="font-size:28upx;" value=""  v-model="solution" />
			</view>
			<text class="guzhangTitle">{{inter.halt}}:</text>
			<view style="height: 44upx;">
				<!-- <switch  @change="shutdowns" :checked="shutdownNum" /> -->
				<image :src="shutdownImg" style="width: 88upx; height: 44upx; margin-top: 6upx;" @click="shutdowns"/>
			</view>
			<text class="guzhangTitle">{{inter.responsible}}:</text>
			<view class="downSelect" @click="pickPeopleClick">
				<p>{{peopleSelectedName}}</p>
				<image src="../../../static/DMS_gzlr_xzxl_icon.png" style="width: 28upx; height: 20upx;" mode="scaleToFill"></image>
			</view>
			<text class="guzhangTitle">{{inter.doneTime}}:</text>
			<view class="searchInput">
				<input type="number" style="background-color: #FFFFFF;border-radius: 10upx;height: 64upx;box-shadow: 2upx #2F2F2F;margin-top: 15upx;font-size: 28upx;padding-left: 18upx;" :placeholder="inter.doneTime" placeholder-style="font-size:28upx;" value=""  v-model="timeUp" />
			</view>
			<text class="guzhangTitle">{{inter.status}}:</text>
			<picker mode="selector" :range="statusArr" v-model="statusDefault"  range-key="Name" @change="statusChange">
				<view class="downSelect">
					<p>{{statusDefault.Name}}</p>
					<image src="../../../static/DMS_gzlr_xzxl_icon.png" style="width: 28upx; height: 20upx;" mode="scaleToFill"></image>
				</view>
			</picker>
			<text class="guzhangTitle">{{inter.priority}}:</text>
			<picker mode="selector" :range="youxianji" v-model="yxj"  range-key="Name" @change="yxjNameChange">
				<view class="downSelect">
					<p>{{yxj.Name}}</p>
					<image src="../../../static/DMS_gzlr_xzxl_icon.png" style="width: 28upx; height: 20upx;" mode="scaleToFill"></image>
				</view>
			</picker>
			<view class="comeonAll">
				<div v-for="(image,index) in ImgUrlsArr" :key="index">
					<div class="uni-uploader__file_footer">
						<image class="uni-uploader__img_footer" :src="image" :data-src="image" @longpress="deleteImg(index)" @click="previewImage(index)"></image>
					</div>
				</div>
				<div class="uni-uploader__input-box-footer"  v-if="ImgUrlsArr.length<3" @click="chooseImage">
					<image src="../../../static/DMS_djrw_yc_add%20_icon.png" style="width: 140upx;height: 140upx;"></image>
				</div>
			</view>
			
		</scroll-view>
		<div style="height: 110upx;">
			<button type="primary" class="upGoBtn" @tap="upload">
				<image src="../../../static/DMS_djrw_tj_icon.png" style="width: 40upx;height: 40upx;" mode=""></image>
				<text  style="font-size: 32upx; margin-left: 14upx;">{{inter.save}}</text>
			</button>
		</div>
		<div class="dialog" v-if="dialogShow" @click="maskClick">
			<div class="dialogDiv" @click.stop>
				<div class="dialogDivTop">
					<text style="color: #FFFFFF;font-size:32upx;margin-left: 42upx;">{{inter.listpeople}}:</text>
				</div>
				<div class="dialog-search">
					<image src="../../../static/DMS_gzgd_cx_icon.png" style="width: 40upx;height: 40upx; margin-left: 10upx;" mode="scaleToFill" ></image>
					<input  type="text" :placeholder="inter.search" @input="dialogSearch" style="width: 436upx; height: 56upx;font-size:28upx; background-color: #FFFFFF;padding-left: 16upx;" />
				</div>
				<div v-if="dialogArr.length == 0"><text style="color: #929292;">{{inter.nomore}}</text></div>
				<scroll-view style="height: 400upx; width: 610upx;" scroll-y="true">
						<div class="dialog-list" v-for="(value, index) in dialogArr" :key="index" @click="dialogClick(value, index)">
							<text style="font-size: 26upx;color: #2F2F2F;">{{value.UserName}}</text>
						</div>
				</scroll-view>
			</div>
		</div>
	</div>
</template>

<script>
	import $api from '@/api/api.js'
	import $inter from '@/api/international.js'
	export default {
		data(){
			return {
				languageValue:'',
				ID:'',
				firstList:[],
				list:[],
				times:0,
				firstdeviceName:'设备名称',
				youxianji:[],
				yxj:"优先级",
				statusArr:[],
				statusDefault:'',
				peopleArr:[],
				peopleSelectedID:'',
				peopleSelectedName:'',
				searchingCode:'',
				dateNow:'',
				nameList:[],
				imageList:[],
				count:9,
				shutdownNum:0,
				shutdown:false,
				imgUpdateUrls:'',
				timeUp:'',
				baseURL:'',
				ImgUrlsArr:[],
				ImgUrls:'',
				solution:'',
				shutdownImg:'',
				dialogArr:[],
				dialogShow:false
			}
		},
		components:{
		},
		onLoad(){
			this.gettickID()
			uni.setNavigationBarTitle({
				title: this.inter.faultDetial
			});
		},
		onUnload() {
			
		},
		methods:{
			maskClick(){
				this.dialogShow=false
			},
			dialogSearch(e){
				let reg = new RegExp(e.target.value, 'i');
				let tempArr = []
				for (let i in this.peopleArr) {
					let n = this.peopleArr[i].UserName.search(reg);
					if (n>-1) {
						tempArr.push(this.peopleArr[i])
					}
				}
				this.dialogArr = tempArr
			},
			dialogClick(value, index){
				this.peopleSelectedID = value.ID
				this.peopleSelectedName =  value.UserName
				this.dialogShow=false
				this.dialogArr = this.peopleArr
			},
			getEqList(PID){
				
				$api.getEqList({
					PID:PID
				},res=>{
					this.list.push(res)
					// this.nameList.push(res[0])
					this.getDicByType()
				},err=>{
					
				},e=>{
					
				})
			},
			getDicByType(){
				$api.getDicByType({
					TypeCode:'Priority'
				},res=>{
					this.youxianji = res
					
				},err=>{
					
				},e=>{
					this.getDicByTypeStatus()
				})
			},
			getDicByTypeStatus(){
				$api.getDicByType({
					TypeCode:'WOStatus'
				},res=>{
					this.statusArr = res
				},err=>{
					
				},e=>{
					this.getTickPeopleList()
				})
			},
			getTickPeopleList(){
				$api.getTickPeopleList({
					key:''
				},res=>{
					this.peopleArr = res
					this.dialogArr = res
					console.log("人员: " + JSON.stringify(res));
				},err=>{
					
				},e=>{
					
				})
			},
			// 获取工单编号
			gettickID(){
				uni.getStorage({
					key: 'ID',
					success: (res)=>{this.tickID=res.data;this.getBaseURL()}
				});
				
			},
			// 获取基地址
			getBaseURL(){
				uni.getStorage({
					key: 'baseURL',
					success: (res)=>{this.baseURL=res.data,this.getFaultOne()}
				});
			},
			getFaultOne(){
				$api.getFaultOne({
					ID: this.tickID
				},res=>{
					
					
					console.log("数据+"+JSON.stringify(res));
					this.id = res[0].ID
					this.solution = res[0].Solution
					let item = {
						ID: res[0].EqLocationID,
						Name: res[0].EquipName
					}
					this.nameList.push(item)
					this.searchingCode = res[0].Describe
					this.timeUp = res[0].TargetHours
					this.shutdownNum = res[0].NeedShutDown
					if (res[0].NeedShutDown==1) {
						this.shutdownImg = '../../../static/DMS_djrw_checkbooks_s_icon.png'
					} else{
						this.shutdownImg = '../../../static/DMS_djrw_checkbooks_n_icon.png'
					}
					let itemPriority = {
						Name : res[0].PriorityDesc,
						Value : res[0].Priority
					}
					
					this.yxj=itemPriority
					
					let itemstatusDefault = {
						Name : res[0].StatusDesc,
						Value : res[0].WOStatus
					}
					this.statusDefault = itemstatusDefault
					this.peopleSelectedName = res[0].ReceiverName
					this.peopleSelectedID = res[0].ReceiverID
					let a = this.baseURL.indexOf('/api')
					if(res[0].ImgUrls===null||res[0].ImgUrls===''){
						this.ImgUrls = ''
						this.ImgUrlsArr=[]
					}else{
						this.ImgUrlsArr = res[0].ImgUrls.split(';')
						this.ImgUrlsArr.pop()
						this.ImgUrlsArr = this.ImgUrlsArr.map((imgurl)=>{return this.baseURL.substring(0,a)+imgurl})
					}
					
					this.getEqList('')
				},err=>{
					
				},e=>{
					
				})
			},
			shutdowns(){
				if(this.shutdownNum==1){
					this.shutdownNum = 0
					this.shutdownImg = '../../../static/DMS_djrw_checkbooks_n_icon.png'
				}else{
					this.shutdownNum = 1
					this.shutdownImg = '../../../static/DMS_djrw_checkbooks_s_icon.png'
				}
			},
 			chooseImage(){
				uni.chooseImage({
					sizeType: ['original', 'compressed'],
					sourceType: ['camera'],
					count: 3-this.ImgUrlsArr.length,
					success: (res) => {
						this.submitImg(res.tempFilePaths)
					}
				})
				
			},
			// 提交图片
			submitImg(imgData){
				// 提交图片
				uni.showToast({
					title:  this.inter.submiting,
					icon:'loading',
					mask:true,
				});
				for (var i = 0; i < imgData.length; i++) {	
					$api.imageUpload(imgData[i], 'Fdata', {'Type': 'EM'},
							res=>{
								res = JSON.parse(res)
								if (res.success==true) {
									let imgurl = res.msg
									let a = this.baseURL.indexOf('/api')
									this.ImgUrlsArr.push(this.baseURL.substring(0,a)+imgurl)
									if(this.ImgUrls==null || this.ImgUrls ==''){
										this.ImgUrls=''
									}
									this.ImgUrls = this.ImgUrls+imgurl+';'
								} else{
									uni.showToast({
										title: res.msg,
										icon:"none",
										duration: 1000
									});
								}
								
							},err=>{
								console.log(err);
							},(e)=>{
								console.log(e);
							})
				}
			},
			
			
			upload(){
				uni.showToast({
					title: this.inter.submiting,
					icon:'loading',
					mask:true
				})
				let params = {
					ID:this.id,
					EqLocationID:this.nameList[this.nameList.length-1].ID,
					Describe:this.searchingCode,
					Priority:this.yxj.Value,
					TargetHours:this.timeUp,
					Solution:this.solution,
					NeedShutDown:this.shutdownNum,
					ImgUrls:this.ImgUrls,
					ReceiverID:this.peopleSelectedID,
					ReceiverName:this.peopleSelectedName,
					WOStatus:this.statusDefault.Value
				
				}
 				$api.saveFaultOne(params,res=>{
 					if(res.success){
 						uni.showToast({
 						title: '提交成功',
 						icon:'success',
 						mask: false,
 						duration: 1500
 						});
						uni.showToast({
							title:this.inter.submitsuccessful,
							icon:"none",
							duration: 1000
						})
						uni.navigateBack();
 					}else{
 						uni.showToast({
 							title:this.inter.submitfailed,
 							icon:"none",
 							duration: 1000
 						})
 					}
					uni.hideToast()
 				},err=>{
 					console.log(JSON.stringify(err.data));
 				},e=>{
 					console.log(JSON.stringify(e));
 					
 				})
				
				
			},
			yxjNameChange(e){
				this.yxj = this.youxianji[e.detail.value]
			},
			statusChange(e){
				this.statusDefault = this.statusArr[e.detail.value]
			},
			pickPeopleClick(){
				this.dialogShow = true
			},
			changeList($event,index,item){
				this.nameList.splice(index,1,item[$event.detail.value])
				if(index+2<this.list.length){
					for(let a = 0;a<this.list.length-(index+2);a++){
						this.list.pop()
					}
				}
				
				$api.getEqList({
					PID:item[$event.detail.value].ID
				},res=>{
					if(res[0]){
						if(this.list[index+1]){
							this.list.splice(index+1,1,res)
							this.nameList.splice(index+1,1,res[0])
						}else{
							this.list.push(res)	
							this.nameList.push(res[0])
						}
					}
				},err=>{
					
				},e=>{
					
				})
						
			},
			// 删除图片
			deleteImg(i){
				uni.showModal({
					title:this.inter.tips,
					content:this.inter.suredeletepictures,
					showCancel:true,
					success:(res)=>{
						if (res.confirm) {
							console.log('用户点击确定');
							let a = this.baseURL.indexOf('/api')
							let b = this.ImgUrlsArr[i].indexOf('/Upload')
							let url = this.ImgUrlsArr[i].substring(b)
							$api.deleteImage({
									Url: url
								},res=>{
									if (res.success==true) {
										console.log("3333"+res);
										this.ImgUrlsArr.splice(i,1)
										if(this.ImgUrlsArr.length>0){
											this.ImgUrls = ''
											for (let j in this.ImgUrlsArr) {
												this.ImgUrls = this.ImgUrls + this.ImgUrlsArr[j].substring(b) + ';'
											}
										}
										uni.showToast({
											title:this.inter.deletesuccessful,
											icon:"none",
											duration: 1000
										})
									} else{
										uni.showToast({
											title:this.inter.deletefailed,
											icon:"none",
											duration: 1000
										})
									}
									
								},err=>{
									uni.showToast({
										title:err,
										icon:"none",
										duration: 1000
									})
								},(e)=>{
									
								})
			
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
						
					}
					
				})
			},

			// 预览图片
			previewImage: function(i) {
				uni.previewImage({
					current: this.ImgUrlsArr[i],
					urls: this.ImgUrlsArr
				})
			},
			
			
		},
		computed:{
			inter(){
				return $inter.producting.faultTick
			}
		}
	}
</script>

<style>
	.comeonAll{
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-top: 20upx;
	}
	.imgBox{
		margin: 40upx ;
	}
	
	
	.checkinSelect{
		display: block;
		width: 100%;
	}
	.downSelect{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		box-shadow:0px 0px 2px 0px rgba(205,205,205,0.5);
		background-color: #FFFFFF;
		margin-top: 10upx;
		color: #2F2F2F;
		height: 64upx;
		font-size: 28upx;
		padding-left: 18upx;
		padding-right: 18upx;
	}
	.upGoBtn{
		background: -webkit-linear-gradient(left, #107FD2 , #06C9ED); /* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #107FD2, #06C9ED); /* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #107FD2, #06C9ED); /* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #107FD2 , #06C9ED); /* 标准的语法 */
		width: 596upx;
		height: 80upx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20upx;
	}
	.ftiPage{
		height: calc(100vh - 120upx);
	}
	.guzhangTitle{
		display: block;
		font-size: 28upx;
		margin-top: 20upx;
	}
	.imgList{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.uni-uploader__file_footer {
		margin: 10upx;
		width: 140upx;
		height: 140upx;
	}
	.uni-uploader__img_footer {
		display: block;
		width: 140upx;
		height: 140upx;
	}
	.uni-uploader__input-box-footer {
		position: relative;
		margin:10upx;
		width: 140upx;
		height: 140upx;
		border: 2upx solid #D9D9D9;
	}
	.dialog{
		background-color:rgba(0,0,0,0.7);
		position: absolute;
		top: 0;
		left: 0;
		z-index:100;
		width: 100vw; 
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.dialogDivTop{
		width: 610upx;
		height: 56upx;
		background: -webkit-linear-gradient(left, #107FD2 , #06C9ED); /* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #107FD2, #06C9ED); /* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #107FD2, #06C9ED); /* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #107FD2 , #06C9ED); /* 标准的语法 */
		border-top-right-radius: 8upx;
		border-top-left-radius: 8upx;
		display:flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.dialogDiv{
		width: 610upx;
		height: 560upx;
		overflow: hidden;
		background-color: #F5F8FF;
		border-radius:8upx;
		margin-top: 220upx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.dialog-list{
		height: 65upx;
		width: 610upx;
		display: flex;
		justify-content: center;
		align-items: center; 
	}
	.dialog-search{
		display: flex;
		width: 526upx;
		height: 56upx; 
		background-color: #FFFFFF;
		border-width: 1upx; 
		border-color: #FFFFFF; 
		margin-top: 22upx;
		flex-direction: row;
		align-items: center;
		border-radius: 8upx;
		margin-bottom: 22upx;
	}
</style>
